import { ref, watch, computed } from 'vue'
import { icon } from '@/plugins'
import { renderLang, renderIcon, getLocalStorage, setLocalStorage, deepClone } from '@/utils'
import { themeColor, setItem, getCharts } from './useLayout.hook'
import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d'
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { StorageEnum } from '@/enums/storageEnum'
// 图标
const { AirPlaneOutlineIcon, ImageIcon, ImagesIcon, AlbumsOutline, EyeOutlineIcon, BarChartIcon, ZAxisIcon, APIIcon } =
  icon.ionicons5
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon

// 图表
export type MenuOptionsType = {
  key: string
  icon: ReturnType<typeof renderIcon>
  label: ReturnType<typeof renderLang>
  list: ConfigType[]
}

const packagesListObj = {
  [PackagesCategoryEnum.GRAPHIC]: {
    icon: renderIcon(ImageIcon),
    label: PackagesCategoryName.GRAPHIC
  },
  [PackagesCategoryEnum.CHARTS]: {
    icon: renderIcon(RoadmapIcon),
    label: PackagesCategoryName.CHARTS
  },
  [PackagesCategoryEnum.INFORMATIONS]: {
    icon: renderIcon(SpellCheckIcon),
    label: PackagesCategoryName.INFORMATIONS
  },
  [PackagesCategoryEnum.TABLES]: {
    icon: renderIcon(TableSplitIcon),
    label: PackagesCategoryName.TABLES
  },
  [PackagesCategoryEnum.DECORATES]: {
    icon: renderIcon(GraphicalDataFlowIcon),
    label: PackagesCategoryName.DECORATES
  },
  [PackagesCategoryEnum.PHOTOS]: {
    icon: renderIcon(ImageIcon),
    label: PackagesCategoryName.PHOTOS
  },
  [PackagesCategoryEnum.ICONS]: {
    icon: renderIcon(AirPlaneOutlineIcon),
    label: PackagesCategoryName.ICONS
  },
  [PackagesCategoryEnum.ENVIRONMENT]: {
    icon: renderIcon(EyeOutlineIcon),
    label: PackagesCategoryName.Environment
  },
  [PackagesCategoryEnum.MATERIAL_LIBRARY]: {
    icon: renderIcon(ZAxisIcon),
    label: PackagesCategoryName.MATERIAL_LIBRARY
  },
  [PackagesCategoryEnum.CUSTOMIZE]: {
    icon: renderIcon(APIIcon),
    label: PackagesCategoryName.CUSTOMIZE
  },
  [PackagesCategoryEnum.TEMP]: {
    icon: renderIcon(AlbumsOutline),
    label: PackagesCategoryName.TEMP
  }
}

export const useAsideHook = () => {
  const packagesStore = usePackagesStore()
  const menuOptions: MenuOptionsType[] = []
  // 处理列表
  const handlePackagesList = () => {
    for (const val in packagesStore.getPackagesList) {
      menuOptions.push({
        key: val,
        // @ts-ignore
        icon: packagesListObj[val]?.icon || '',
        // @ts-ignore
        label: packagesListObj[val]?.label,
        // @ts-ignore
        list: packagesStore.getPackagesList[val]
      })
    }
  }
  handlePackagesList()
  // 记录选中值
  let beforeSelect: string = menuOptions[0]['key']
  const selectValue = ref<string>(menuOptions[0]['key'])

  // 选中的对象值
  const selectOptions = ref(menuOptions[0])

  // 点击 item
  const clickItemHandle = (key: string, item: any, isCustomize?: boolean) => {
    isCustomize && (selectValue.value = key)
    let obj = item
    if (key == 'Customize' || key == 'Temp') {
      const list = getLocalStorage(
        key == 'Customize' ? StorageEnum.GO_USER_MEDIA_CUSTOMIZE : StorageEnum.GO_USER_MEDIA_TEMP
      )
      obj.list.splice(1, obj.list.length - 1)
      obj.list.push(...list)
    }
    selectOptions.value = obj

    // 处理折叠
    if (beforeSelect === key) {
      setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
    } else {
      setItem(ChartLayoutStoreEnum.CHARTS, true, false)
    }
    beforeSelect = key
  }
  return {
    getCharts,
    BarChartIcon,
    themeColor,
    selectOptions,
    selectValue,
    clickItemHandle,
    menuOptions
  }
}
